@charset "UTF-8";

@import "../core/reset";
@import "./homepage/homepageHeader.scss";
@import "./homepage/homepageFooter.scss";

body {
  width: 100%;
  height: 100%;
}
.m-index {
  height: 100%;
  width: 100%;
  @include flexbox();
  @include flex-direction(column);
  background: white;
  // min-width: 300px;
  // max-width: 640px;
  #homepageBody {
    position: relative;
    @include flex(1);
    width: 100%;
    overflow: hidden;
    // overflow-y: scroll;
    .swiper-container {
      width: 100%;
      height: 1.55rem;

      a {
        width: 100%;
        height: 100%;
        display: block;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .swiper-pagination-bullet-active {
        background: white;
      }
    }

    .navList {
      height: 40vw;
      ul {
        @include flexbox();
        @include flex-direction(row);
        @include flex-wrap(wrap);
        height: 40vw;
        background: #de4943;
        li {
          box-sizing: border-box;
          border: 1px solid black;
          width: 20%;
          height: 20vw;
          background: grey;
          overflow: hidden;
           a{
             width: 100%;
             height: 100%;
             display: block;

             img {
               width: 100%;
               height: 100%;
             }
           }
        }

      }
    }

    #swiper-container2 {
      height: 43vw;
      background: white;
      .swiper-slide {
      width: 28vw;
      padding: 0;
        a {
          width: 100%;
          height: 100%;
          display: block;
          // border: 1px solid black;
          @include flexbox();
          @include flex-direction(column);
          justify-content: space-between;
          img {
            width: 25vw;
            height: 25vw;
            margin-left: 1vw;
          }

          p {
            color: black;
            @include ellipsis(null, 2);
            font-size: .13rem;
            line-height: .16rem;
          }

          h4 {
            color: red;
            height: .15rem;
            line-height: .15rem;
            font-size: .14rem;
          }

          h5 {
            text-decoration: line-through;
            height: .13rem;
            line-height: .13rem;
            font-size: .12rem;
            color: grey;
          }

        }
      }

    }

    #homepageList {
      ul {
        @include flexbox();
        @include flex-direction(row);
        @include flex-wrap(wrap);
        li {

          width: 50%;
          height: 60vw;
          background: white;
          @include border(1px 1px 1px 1px);
          border-color: #333;

          a {
            width: 100%;
            height: 100%;
            display: block;
            @include flexbox();
            @include flex-direction(column);
            align-items: center;
            justify-content: center;
          }
          img {
            width: 40vw;
            height: 40vw;
          }

          p {
            @include ellipsis(null, 2);

          }
          span {
            color: red;

          }

        }
      }
    }

    .homePageFooter {
        text-align: center;
        height: .4rem;
        line-height: .4rem;
    }
    .homePageFooter img {
      width: .15rem;
      display: inline-block;
      transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transition: transform 150ms;
      -webkit-transition: transform 150ms;
    }
    .homePageFooter img .down {
        transform: rotate(180deg) !important;
        -webkit-transform: rotate(180deg) !important;
    }

  }
}
